<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="仓库管理" name="first">
          <el-row :gutter="15">

            <el-col :span="7.5">
              <el-card>
                <div style="display: inline;border: 1px">
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    备件入库
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    备件出库
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    库存查询
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    备件信息
                  </el-button>
                  <p class="p">仓库管理</p>
                </div>
              </el-card>
            </el-col>


            <el-col :span="9.5">
              <el-card>
                <div style="display: inline;border: 1px">
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    初始化业务数据
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    备件及库存数据导入
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    数据字典
                  </el-button>
                  <el-button size="small" @click="tonew">
                    <img class="img" src="../../assets/img/login.jpg" alt="">
                    退出系统
                  </el-button>
                  <p class="p">数据管理</p>
                </div>
              </el-card>
            </el-col>

            <el-col :span="5">
              <el-card>
                <el-button @click="tonew" style="margin-left: 10px;background-color: #e7899a" size="mini"
                           circle></el-button>
                <el-button @click="tonew" style="background-color: #aae7e5" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #e76f8b" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #99474f" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #4f54e7" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #4d3de7" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #54e74f" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #e73fb1" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #26c4e7" size="mini" circle></el-button>
                <el-button @click="tonew" style="background-color: #c5d2e7" size="mini" circle></el-button>
                <p class="p">界面皮肤</p>
              </el-card>
            </el-col>
          </el-row>
          <el-tabs v-model="newActive">
            <el-tab-pane label="备件入库" name="first">备件入库</el-tab-pane>
            <el-tab-pane label="备件出库" name="second">备件出库</el-tab-pane>
            <el-tab-pane label="备件信息管理" name="third">备件信息管理</el-tab-pane>
            <el-tab-pane label="库存查询" name="fourth">
              <el-tabs v-model="newActive1">
                <el-tab-pane label="库存查询" name="first">

                  <!--查询条件-->
                  <el-card style="background-color: #acc6e7">
                    <el-form :inline="true" :model="s3Vo" class="demo-form-inline">
                      <el-form-item label="选择仓库" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.iuiy"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="备件属类" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.dd"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="备件类别" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.sdf"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="供货商" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.supplerId"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="来源" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.kl"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="备件编码" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 145px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.num"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="备件名称" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 145px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.name"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="图号" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 145px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.drawingNo"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="规格型号" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.model"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="材质" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 145px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.texture"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="单位" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.kk"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="使用位置" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 145px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.location"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="单价" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 64px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.price"
                                  placeholder="请输入"></el-input>
                        ~
                        <el-input clearable=""
                                  size="mini" style="width: 64px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.price1"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="库存量" label-width="80px">
                        <el-input clearable=""
                                  size="mini" style="width: 64px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.stock"
                                  placeholder="请输入"></el-input>
                        ~
                        <el-input clearable=""
                                  size="mini" style="width: 64px"
                                  @keyup.enter.native="search"
                                  @clear="search" v-model="s3Vo.stock1"
                                  placeholder="请输入"></el-input>
                      </el-form-item>

                      <el-form-item label="库位" label-width="80px">
                        <el-select size="mini" style="width: 145px"
                                   clearable @clear="search"
                                   v-model="s3Vo.stockId"
                                   placeholder="请选择" value="">
                          <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="search">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item style="margin-left: 10px;float: right">
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                        <el-button size="mini" icon="el-icon-refresh" @click="resetS3Vo">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </el-card>

                  <!--查询条件结束-->

                  <div style="margin-left: 10px;">库存商品信息</div>


                  <!--表格内容显示区-->
                  <el-table
                    :data="s3List"
                    border
                    highlight-current-row
                    :row-class-name="tableRowClassName"
                    max-height="400"
                    style="width: 100%">
                    <el-table-column align="center" label="序号" type="index" width="50px"></el-table-column>
                    <el-table-column prop="id" label="编号" width="60px"></el-table-column>
                    <el-table-column prop="num" align="center" :show-overflow-tooltip='true' label="备件编号"
                                     width="130px"></el-table-column>
                    <el-table-column prop="name" label="备件名称" width="120px"></el-table-column>
                    <el-table-column prop="price" align="right" label="单价" width="100px">
                      <template slot-scope="scope">
                        {{scope.row.price}}.00
                      </template>
                    </el-table-column>
                    <el-table-column prop="stock" align="right" label="库存量" width="100px"></el-table-column>
                    <el-table-column prop="inventoryAmount" align="right" label="库存金额" width="100px">
                      <template slot-scope="scope">
                        {{scope.row.inventoryAmount}}.00
                      </template>
                    </el-table-column>
                    <el-table-column prop="supplierId" align="center" label="供应商" width="100px">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.supplierId==='1'">供应商1</el-tag>
                        <el-tag v-if="scope.row.supplierId==='0'">供应商0</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="drawingNo" align="center" label="图号" width="100px"></el-table-column>
                    <el-table-column prop="model" label="规格型号" width="150px">
                      <template slot-scope="scope">
                        <div style="width: 60px;display: inline;float: left"> {{scope.row.model.split('--')[0]}}</div>
                        <div style="width: 50px;display: inline;float: right"> {{scope.row.model.split('--')[1]}}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="texture" align="center" label="材质" width="100px">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.supplierId==='1'">材质1</el-tag>
                        <el-tag v-if="scope.row.supplierId==='0'">材质0</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="attribute" align="center" label="备件属性" width="100px"></el-table-column>

                  </el-table>
                </el-tab-pane>


                <el-tab-pane label="库房项目明细" name="second">库房项目明细</el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="权限管理" name="second">权限管理</el-tab-pane>
        <el-tab-pane label="业务报表" name="third">业务报表</el-tab-pane>
        <el-tab-pane label="帮助" name="fourth">帮助</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import { findList } from '../../api/work/s3'

  export default {
    name: 'S3',
    data () {
      return {
        activeName: 'first',
        newActive: 'fourth',
        newActive1: 'first',
        s3Vo: {},
        s3List: [],
        departments: [{
          'id': 0,
          'name': '0'
        }, {
          'id': 1,
          'name': '1'
        },]
      }
    },
    created () {
      this.findList()
    },
    methods: {
      tonew () {
        this.msgSuccess(1111)
      },
      search () {
        this.findList()
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },

      findList () {
        findList(this.s3Vo).then(res => {
          if (res) {
            this.s3List = res.data.data.records
          }
        })
      },

      resetS3Vo () {
        this.s3Vo = {}
        this.findList()
      }
    }
  }
</script>

<style  scoped>
  .el-table .warning-row {
    background: #f7faff;
  }

  .el-table .success-row {
    background: #ebf1fb;
  }

  .p {
    margin-bottom: -18px;
    margin-top: 30px;
    text-align: center;
  }

  .img {
    margin: auto;
    display: block;
    height: 30px;
    width: 30px;
  }
</style>
